<template>
  <div class="content1">
    <div class="Title">
      <p>学院新闻</p>
    </div>
    <div class="text">
      <el-table
        :data="tableData"
        :span-method="objectSpanMethod"
        show-header:false
        slot="empty"
        height:200px
        @row-click="article"
      >
        <el-table-column class-name="img" prop="img">
          <template slot-scope="scope">
            <el-image
              class="table-img"
              :style="content"
              :src="scope.row.img"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="title" class-name="title-content">
          <template slot-scope="scope">
            <h2 class="title-content-h2">{{ scope.row.title }}</h2>
            <i class="arrow el-icon-arrow-right"></i>
            <p class="title-content-p">{{ scope.row.content }}</p>
          </template>
        </el-table-column>
        <el-table-column class-name="content"> </el-table-column>
      </el-table>
    </div>
    <el-button
      @click="gonews"
      type="primary"
      style="background-color: #084fb0; border-color: #084fb0"
      >查看更多</el-button
    >
  </div>
</template>
<script>
import { contentnews } from "@/api/index";
export default {
  name: "ContentNews",
  data() {
    return {
      tableData: [],
      content: {
        height: "3.2rem",
        width: "4.1rem",
      },
    };
  },
  created() {
    // 调用API
    contentnews().then((res) => {
      const data = res.data;
      this.tableData = data;
    });
  },
  methods: {
    gonews() {
      // 向APP传值
      this.$emit("news", false);
      // 路由跳转
      this.$router.push({
        path: "/more-text",
        query: { key: "学院新闻", more: 1, article: 0, apinum: 0 },
      });
    },
    // 合拼表格
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (
        rowIndex === 0 ||
        rowIndex === 1 ||
        rowIndex === 2 ||
        rowIndex === 3
      ) {
        if (columnIndex === 1) {
          return [1, 2];
        }
      }
    },
    article(row, event, column) {
      console.log(row.indexesid, event, column);
      this.$router.push({
        path: "/more-text",
        query: { key: "学院新闻", article: 1, id: row.indexesid },
      });
    },
  },
};
</script>
<style>
/* 学院新闻 */
.content1 {
  padding: 0.12rem;
  margin-bottom: 0.32rem;
  background: white;
}
/* 标题 */
.Title {
  text-align: left;
  color: white;
  width: 97%;
  border-bottom: 0.08rem solid #084fb0;
  margin-left: 0.2rem;
  margin-bottom: 0.8rem;
  padding-top: 0.4rem;
}
/* 标题背景 */
.Title p {
  background: url("@/assets/content/ico9.jpg") no-repeat center center;
  background-size: 100%;
  padding-top: 0.04rem;
  padding-left: 0.2rem;
  font-size: 0.7rem;
  width: 27%;
}
/* 按钮 */
.el-button {
  height: 1.3rem;
  position: relative;
  left: 28%;
  width: 45%;
  line-height: 0.5 !important;
  margin-top: 0.4rem !important;
  margin-bottom: 0.4rem !important;
}
.el-button span {
  font-size: 0.56rem;
}
/* 表头 */
.el-table__header {
  display: none;
}
/* 表格单行 */
.content1 .text .el-table .cell {
  line-height: 0.8rem !important;
  width: 98%;
  height: 3.2rem;
}
.el-table--enable-row-transition .el-table__body td.el-table__cell {
  -ms-transition: background-color 0.25s ease;
  -webkit-transition: background-color 0.25s ease;
  -moz-transition: background-color 0.25s ease;
  -o-transition: background-color 0.25s ease;
}
/* 表格图片 */
.content1 .text .el-table .cell .table-img {
  max-width: 100%;
  max-height: 100%;
}
/* 表格标题 */
.content1 .text .el-table .title-content .cell .title-content-h2 {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  font-weight: normal;
  color: black;
  font-size: 0.6rem !important;
  margin-bottom: 0.2rem;
}
/* 表格内容 */
.content1 .text .el-table .title-content .cell .title-content-p {
  height: 2.8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  line-height: 0.72rem !important;
  font-size: 0.46rem !important;
}
/* 合并的空表格 */
.el-table__body .content .cell {
  width: 0;
  height: 0;
}
</style>
